<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jane Doe - Personal Resume</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- Tailwind Configuration -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#3B82F6",
              secondary: "#10B981",
              accent: "#8B5CF6",
              dark: {
                100: "#1F2937",
                200: "#111827",
                300: "#030712",
              },
              light: {
                100: "#F9FAFB",
                200: "#F3F4F6",
                300: "#E5E7EB",
              },
            },
            fontFamily: {
              inter: ["Inter", "sans-serif"],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-shadow {
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .transition-smooth {
          transition: all 0.3s ease-in-out;
        }
      }
    </style>
  </head>

  <body
    class="font-inter bg-light-100 text-gray-800 dark:bg-dark-200 dark:text-gray-200 transition-smooth"
  >
    <!-- Theme Toggle Button -->
    <button
      id="theme-toggle"
      class="fixed top-6 right-6 p-3 rounded-full bg-primary/10 dark:bg-primary/20 text-primary hover:bg-primary/20 dark:hover:bg-primary/30 transition-smooth z-50"
    >
      <i class="fa fa-sun-o block dark:hidden" aria-hidden="true"></i>
      <i class="fa fa-moon-o hidden dark:block" aria-hidden="true"></i>
    </button>

    <div class="container mx-auto px-4 py-12 max-w-6xl">
      <!-- Header Section -->
      <header class="mb-12 text-center">
        <div class="relative inline-block mb-4">
          <img
            src="https://picsum.photos/id/64/200/200"
            alt="Jane Doe Profile Picture"
            class="w-36 h-36 rounded-full object-cover border-4 border-primary shadow-lg"
          />
          <div
            class="absolute -bottom-2 -right-2 bg-secondary text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md"
          >
            <i class="fa fa-code" aria-hidden="true"></i>
          </div>
        </div>

        <h1
          class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-900 dark:text-white mb-2 text-shadow"
        >
          Jane Doe
        </h1>
        <p
          class="text-[clamp(1.1rem,3vw,1.5rem)] text-primary font-medium mb-4"
        >
          Senior Frontend Developer
        </p>

        <div
          class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-gray-600 dark:text-gray-400 mb-6"
        >
          <div class="flex items-center">
            <i class="fa fa-envelope-o mr-2" aria-hidden="true"></i>
            <span>jane.doe@example.com</span>
          </div>
          <div class="flex items-center">
            <i class="fa fa-phone mr-2" aria-hidden="true"></i>
            <span>+1 (555) 123-4567</span>
          </div>
          <div class="flex items-center">
            <i class="fa fa-map-marker mr-2" aria-hidden="true"></i>
            <span>San Francisco, CA</span>
          </div>
        </div>

        <div class="flex justify-center gap-4">
          <a
            href="#"
            class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-smooth text-xl"
          >
            <i class="fa fa-linkedin-square" aria-hidden="true"></i>
          </a>
          <a
            href="#"
            class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-smooth text-xl"
          >
            <i class="fa fa-github-square" aria-hidden="true"></i>
          </a>
          <a
            href="#"
            class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-smooth text-xl"
          >
            <i class="fa fa-twitter-square" aria-hidden="true"></i>
          </a>
          <a
            href="#"
            class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-smooth text-xl"
          >
            <i class="fa fa-globe" aria-hidden="true"></i>
          </a>
        </div>
      </header>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Left Column -->
        <div class="lg:col-span-1 space-y-8">
          <!-- Profile Summary -->
          <section
            class="bg-white dark:bg-dark-100 rounded-xl shadow-lg p-6 hover:shadow-xl transition-smooth"
          >
            <h2
              class="text-xl font-bold mb-4 text-gray-900 dark:text-white flex items-center"
            >
              <i
                class="fa fa-user-circle-o mr-2 text-primary"
                aria-hidden="true"
              ></i>
              Profile
            </h2>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
              Experienced Frontend Developer with 7+ years of expertise in
              building responsive, user-friendly websites and applications.
              Proficient in modern JavaScript frameworks and passionate about
              creating exceptional user experiences.
            </p>
          </section>

          <!-- Skills -->
          <section
            class="bg-white dark:bg-dark-100 rounded-xl shadow-lg p-6 hover:shadow-xl transition-smooth"
          >
            <h2
              class="text-xl font-bold mb-4 text-gray-900 dark:text-white flex items-center"
            >
              <i class="fa fa-code mr-2 text-primary" aria-hidden="true"></i>
              Skills
            </h2>

            <div class="space-y-4">
              <div>
                <div class="flex justify-between mb-1">
                  <span class="font-medium">HTML5 & CSS3</span>
                  <span>95%</span>
                </div>
                <div
                  class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"
                >
                  <div
                    class="bg-primary h-2.5 rounded-full"
                    style="width: 95%"
                  ></div>
                </div>
              </div>

              <div>
                <div class="flex justify-between mb-1">
                  <span class="font-medium">JavaScript (ES6+)</span>
                  <span>90%</span>
                </div>
                <div
                  class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"
                >
                  <div
                    class="bg-primary h-2.5 rounded-full"
                    style="width: 90%"
                  ></div>
                </div>
              </div>

              <div>
                <div class="flex justify-between mb-1">
                  <span class="font-medium">React & Vue</span>
                  <span>85%</span>
                </div>
                <div
                  class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"
                >
                  <div
                    class="bg-primary h-2.5 rounded-full"
                    style="width: 85%"
                  ></div>
                </div>
              </div>

              <div>
                <div class="flex justify-between mb-1">
                  <span class="font-medium">Tailwind CSS</span>
                  <span>90%</span>
                </div>
                <div
                  class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"
                >
                  <div
                    class="bg-primary h-2.5 rounded-full"
                    style="width: 90%"
                  ></div>
                </div>
              </div>

              <div>
                <div class="flex justify-between mb-1">
                  <span class="font-medium">UI/UX Design</span>
                  <span>75%</span>
                </div>
                <div
                  class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"
                >
                  <div
                    class="bg-primary h-2.5 rounded-full"
                    style="width: 75%"
                  ></div>
                </div>
              </div>
            </div>
          </section>

          <!-- Languages -->
          <section
            class="bg-white dark:bg-dark-100 rounded-xl shadow-lg p-6 hover:shadow-xl transition-smooth"
          >
            <h2
              class="text-xl font-bold mb-4 text-gray-900 dark:text-white flex items-center"
            >
              <i
                class="fa fa-language mr-2 text-primary"
                aria-hidden="true"
              ></i>
              Languages
            </h2>

            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <span>English</span>
                <div class="flex">
                  <i
                    class="fa fa-circle text-primary text-xs"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-primary text-xs mx-1"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-primary text-xs"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-primary text-xs mx-1"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-primary text-xs"
                    aria-hidden="true"
                  ></i>
                </div>
              </div>

              <div class="flex justify-between items-center">
                <span>Spanish</span>
                <div class="flex">
                  <i
                    class="fa fa-circle text-primary text-xs"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-primary text-xs mx-1"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-primary text-xs"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-gray-300 dark:text-gray-600 text-xs mx-1"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-gray-300 dark:text-gray-600 text-xs"
                    aria-hidden="true"
                  ></i>
                </div>
              </div>

              <div class="flex justify-between items-center">
                <span>French</span>
                <div class="flex">
                  <i
                    class="fa fa-circle text-primary text-xs"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-primary text-xs mx-1"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-gray-300 dark:text-gray-600 text-xs"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-gray-300 dark:text-gray-600 text-xs mx-1"
                    aria-hidden="true"
                  ></i>
                  <i
                    class="fa fa-circle text-gray-300 dark:text-gray-600 text-xs"
                    aria-hidden="true"
                  ></i>
                </div>
              </div>
            </div>
          </section>

          <!-- Interests -->
          <section
            class="bg-white dark:bg-dark-100 rounded-xl shadow-lg p-6 hover:shadow-xl transition-smooth"
          >
            <h2
              class="text-xl font-bold mb-4 text-gray-900 dark:text-white flex items-center"
            >
              <i class="fa fa-heart-o mr-2 text-primary" aria-hidden="true"></i>
              Interests
            </h2>

            <div class="flex flex-wrap gap-2">
              <span
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 rounded-full text-sm"
                >Web Development</span
              >
              <span
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 rounded-full text-sm"
                >UI/UX Design</span
              >
              <span
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 rounded-full text-sm"
                >Open Source</span
              >
              <span
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 rounded-full text-sm"
                >Photography</span
              >
              <span
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 rounded-full text-sm"
                >Hiking</span
              >
              <span
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 rounded-full text-sm"
                >Reading</span
              >
              <span
                class="px-3 py-1 bg-light-200 dark:bg-dark-300 rounded-full text-sm"
                >Cooking</span
              >
            </div>
          </section>
        </div>

        <!-- Right Column -->
        <div class="lg:col-span-2 space-y-8">
          <!-- Experience -->
          <section
            class="bg-white dark:bg-dark-100 rounded-xl shadow-lg p-6 hover:shadow-xl transition-smooth"
          >
            <h2
              class="text-xl font-bold mb-6 text-gray-900 dark:text-white flex items-center"
            >
              <i
                class="fa fa-briefcase mr-2 text-primary"
                aria-hidden="true"
              ></i>
              Work Experience
            </h2>

            <div class="space-y-6">
              <!-- Job 1 -->
              <div
                class="relative pl-8 pb-6 border-l-2 border-primary/30 last:border-l-2 last:border-transparent last:pb-0"
              >
                <div
                  class="absolute w-4 h-4 bg-primary rounded-full -left-[9px] top-0"
                ></div>
                <div class="flex flex-wrap justify-between mb-1">
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white"
                  >
                    Senior Frontend Developer
                  </h3>
                  <span
                    class="text-sm font-medium text-gray-500 dark:text-gray-400"
                    >Jan 2020 - Present</span
                  >
                </div>
                <p class="text-primary font-medium mb-2">TechCorp Inc.</p>
                <p class="text-gray-700 dark:text-gray-300 mb-3">
                  Lead the frontend development team in building responsive web
                  applications using React, Tailwind CSS, and modern JavaScript.
                  Implemented CI/CD pipelines and improved page load performance
                  by 40%.
                </p>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >React</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >Tailwind CSS</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >TypeScript</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >Redux</span
                  >
                </div>
              </div>

              <!-- Job 2 -->
              <div
                class="relative pl-8 pb-6 border-l-2 border-primary/30 last:border-l-2 last:border-transparent last:pb-0"
              >
                <div
                  class="absolute w-4 h-4 bg-primary rounded-full -left-[9px] top-0"
                ></div>
                <div class="flex flex-wrap justify-between mb-1">
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white"
                  >
                    Frontend Developer
                  </h3>
                  <span
                    class="text-sm font-medium text-gray-500 dark:text-gray-400"
                    >Mar 2017 - Dec 2019</span
                  >
                </div>
                <p class="text-primary font-medium mb-2">WebSolutions Co.</p>
                <p class="text-gray-700 dark:text-gray-300 mb-3">
                  Developed and maintained client websites and web applications.
                  Collaborated with designers to implement pixel-perfect UIs and
                  improved user experience across multiple projects.
                </p>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >Vue.js</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >Sass</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >JavaScript</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >Webpack</span
                  >
                </div>
              </div>

              <!-- Job 3 -->
              <div
                class="relative pl-8 pb-6 border-l-2 border-primary/30 last:border-l-2 last:border-transparent last:pb-0"
              >
                <div
                  class="absolute w-4 h-4 bg-primary rounded-full -left-[9px] top-0"
                ></div>
                <div class="flex flex-wrap justify-between mb-1">
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white"
                  >
                    Junior Web Developer
                  </h3>
                  <span
                    class="text-sm font-medium text-gray-500 dark:text-gray-400"
                    >Jun 2015 - Feb 2017</span
                  >
                </div>
                <p class="text-primary font-medium mb-2">DigitalCraft Agency</p>
                <p class="text-gray-700 dark:text-gray-300 mb-3">
                  Assisted in building and maintaining websites for various
                  clients. Worked on responsive layouts, cross-browser
                  compatibility, and implementing new features based on client
                  requirements.
                </p>
                <div class="flex flex-wrap gap-2">
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >HTML5</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >CSS3</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >jQuery</span
                  >
                  <span
                    class="px-2 py-1 bg-primary/10 text-primary text-xs rounded"
                    >Bootstrap</span
                  >
                </div>
              </div>
            </div>
          </section>

          <!-- Education -->
          <section
            class="bg-white dark:bg-dark-100 rounded-xl shadow-lg p-6 hover:shadow-xl transition-smooth"
          >
            <h2
              class="text-xl font-bold mb-6 text-gray-900 dark:text-white flex items-center"
            >
              <i
                class="fa fa-graduation-cap mr-2 text-primary"
                aria-hidden="true"
              ></i>
              Education
            </h2>

            <div class="space-y-6">
              <!-- Degree 1 -->
              <div
                class="relative pl-8 pb-6 border-l-2 border-secondary/30 last:border-l-2 last:border-transparent last:pb-0"
              >
                <div
                  class="absolute w-4 h-4 bg-secondary rounded-full -left-[9px] top-0"
                ></div>
                <div class="flex flex-wrap justify-between mb-1">
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white"
                  >
                    Master of Science in Computer Science
                  </h3>
                  <span
                    class="text-sm font-medium text-gray-500 dark:text-gray-400"
                    >2013 - 2015</span
                  >
                </div>
                <p class="text-secondary font-medium mb-2">
                  Stanford University
                </p>
                <p class="text-gray-700 dark:text-gray-300">
                  Specialized in Human-Computer Interaction and Web
                  Technologies. Thesis on "Responsive Design Patterns for Modern
                  Web Applications".
                </p>
              </div>

              <!-- Degree 2 -->
              <div
                class="relative pl-8 pb-6 border-l-2 border-secondary/30 last:border-l-2 last:border-transparent last:pb-0"
              >
                <div
                  class="absolute w-4 h-4 bg-secondary rounded-full -left-[9px] top-0"
                ></div>
                <div class="flex flex-wrap justify-between mb-1">
                  <h3
                    class="text-lg font-semibold text-gray-900 dark:text-white"
                  >
                    Bachelor of Science in Information Technology
                  </h3>
                  <span
                    class="text-sm font-medium text-gray-500 dark:text-gray-400"
                    >2009 - 2013</span
                  >
                </div>
                <p class="text-secondary font-medium mb-2">
                  University of California, Berkeley
                </p>
                <p class="text-gray-700 dark:text-gray-300">
                  Major in Web Development with minor in Design. Graduated with
                  honors.
                </p>
              </div>
            </div>
          </section>

          <!-- Projects -->
          <section
            class="bg-white dark:bg-dark-100 rounded-xl shadow-lg p-6 hover:shadow-xl transition-smooth"
          >
            <h2
              class="text-xl font-bold mb-6 text-gray-900 dark:text-white flex items-center"
            >
              <i
                class="fa fa-folder-open-o mr-2 text-primary"
                aria-hidden="true"
              ></i>
              Featured Projects
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!-- Project 1 -->
              <div
                class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-smooth"
              >
                <div class="h-40 overflow-hidden">
                  <img
                    src="https://picsum.photos/id/0/600/400"
                    alt="E-commerce Platform"
                    class="w-full h-full object-cover hover:scale-105 transition-smooth duration-500"
                  />
                </div>
                <div class="p-4">
                  <h3 class="font-semibold text-gray-900 dark:text-white mb-1">
                    E-commerce Platform
                  </h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                    A fully responsive e-commerce solution with payment
                    integration and user authentication.
                  </p>
                  <div class="flex flex-wrap gap-2 mb-3">
                    <span
                      class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded"
                      >React</span
                    >
                    <span
                      class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded"
                      >Node.js</span
                    >
                    <span
                      class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded"
                      >MongoDB</span
                    >
                  </div>
                  <a
                    href="#"
                    class="text-primary text-sm font-medium hover:underline flex items-center"
                  >
                    View Project
                    <i
                      class="fa fa-arrow-right ml-1 text-xs"
                      aria-hidden="true"
                    ></i>
                  </a>
                </div>
              </div>

              <!-- Project 2 -->
              <div
                class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-smooth"
              >
                <div class="h-40 overflow-hidden">
                  <img
                    src="https://picsum.photos/id/180/600/400"
                    alt="Task Management App"
                    class="w-full h-full object-cover hover:scale-105 transition-smooth duration-500"
                  />
                </div>
                <div class="p-4">
                  <h3 class="font-semibold text-gray-900 dark:text-white mb-1">
                    Task Management App
                  </h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                    A collaborative task management application with real-time
                    updates and team features.
                  </p>
                  <div class="flex flex-wrap gap-2 mb-3">
                    <span
                      class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded"
                      >Vue.js</span
                    >
                    <span
                      class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded"
                      >Firebase</span
                    >
                    <span
                      class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded"
                      >Tailwind</span
                    >
                  </div>
                  <a
                    href="#"
                    class="text-primary text-sm font-medium hover:underline flex items-center"
                  >
                    View Project
                    <i
                      class="fa fa-arrow-right ml-1 text-xs"
                      aria-hidden="true"
                    ></i>
                  </a>
                </div>
              </div>
            </div>
          </section>

          <!-- Certifications -->
          <section
            class="bg-white dark:bg-dark-100 rounded-xl shadow-lg p-6 hover:shadow-xl transition-smooth"
          >
            <h2
              class="text-xl font-bold mb-6 text-gray-900 dark:text-white flex items-center"
            >
              <i
                class="fa fa-certificate mr-2 text-primary"
                aria-hidden="true"
              ></i>
              Certifications
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div
                class="flex p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-light-200/50 dark:hover:bg-dark-300/50 transition-smooth"
              >
                <div class="mr-4 text-accent text-2xl">
                  <i class="fa fa-html5" aria-hidden="true"></i>
                </div>
                <div>
                  <h3 class="font-medium text-gray-900 dark:text-white">
                    Advanced HTML5 & CSS3
                  </h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    W3C Certification • 2021
                  </p>
                </div>
              </div>

              <div
                class="flex p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-light-200/50 dark:hover:bg-dark-300/50 transition-smooth"
              >
                <div class="mr-4 text-accent text-2xl">
                  <i class="fa fa-react" aria-hidden="true"></i>
                </div>
                <div>
                  <h3 class="font-medium text-gray-900 dark:text-white">
                    React Developer Professional
                  </h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Facebook • 2020
                  </p>
                </div>
              </div>

              <div
                class="flex p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-light-200/50 dark:hover:bg-dark-300/50 transition-smooth"
              >
                <div class="mr-4 text-accent text-2xl">
                  <i class="fa fa-mobile" aria-hidden="true"></i>
                </div>
                <div>
                  <h3 class="font-medium text-gray-900 dark:text-white">
                    Mobile-First Web Development
                  </h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Google • 2019
                  </p>
                </div>
              </div>

              <div
                class="flex p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-light-200/50 dark:hover:bg-dark-300/50 transition-smooth"
              >
                <div class="mr-4 text-accent text-2xl">
                  <i class="fa fa-lock" aria-hidden="true"></i>
                </div>
                <div>
                  <h3 class="font-medium text-gray-900 dark:text-white">
                    Web Security Fundamentals
                  </h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    OWASP • 2018
                  </p>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>

      <!-- Footer -->
      <footer
        class="mt-16 text-center text-gray-600 dark:text-gray-400 text-sm"
      >
        <p>© 2023 Jane Doe. All rights reserved.</p>
        <p class="mt-1">Last updated: August 2023</p>
      </footer>
    </div>

    <!-- JavaScript for Theme Toggle -->
    <script>
      // Check for saved theme preference or use system preference
      const savedTheme = localStorage.getItem("theme");
      const prefersDark = window.matchMedia(
        "(prefers-color-scheme: dark)"
      ).matches;

      // Apply initial theme
      if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
        document.documentElement.classList.add("dark");
      }

      // Theme toggle functionality
      const themeToggle = document.getElementById("theme-toggle");
      themeToggle.addEventListener("click", () => {
        const isDark = document.documentElement.classList.toggle("dark");
        localStorage.setItem("theme", isDark ? "dark" : "light");
      });

      // Add scroll animation for smooth transitions
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener("click", function (e) {
          e.preventDefault();
          const targetId = this.getAttribute("href");
          if (targetId !== "#") {
            document.querySelector(targetId).scrollIntoView({
              behavior: "smooth",
            });
          }
        });
      });
    </script>
  </body>
</html>
